<template>
  <div class="ele-footer">
    <mt-tabbar v-model="currentTab" :fixed="true">
      <mt-tab-item id="home" @click.native="$router.push({name: currentTab})">
        <img slot="icon" src="../../assets/home.png" v-show="currentTab =='home'">
        <img slot="icon" src="../../assets/home-selected.png" v-show="currentTab !='home'">
        首页
      </mt-tab-item>
      <mt-tab-item id="find" @click.native="$router.push({name: currentTab})">
        <img slot="icon" src="../../assets/find.png" v-show="currentTab=='find'">
        <img slot="icon" src="../../assets/find-selected.png" v-show="currentTab!='find'">
        发现
      </mt-tab-item>
      <mt-tab-item id="order" @click.native="$router.push({name: currentTab})">
        <img slot="icon" src="../../assets/order.png" v-show="currentTab=='order'">
        <img slot="icon" src="../../assets/order-selected.png" v-show="currentTab !='order'">
        订单
      </mt-tab-item>
      <mt-tab-item id="mine" @click.native="$router.push({name: currentTab})">
        <img slot="icon" src="../../assets/mine.png" v-show="currentTab =='mine'">
        <img slot="icon" src="../../assets/mine-selected.png" v-show="currentTab!='mine'">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  props: ["selected"],
  data() {
    return {
      currentTab: this.selected
    };
  }
};
</script>

<style scoped>
.ele-footer{
  margin-top: 18vw;
  
}
</style>
